<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无废城市知识问答</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .question {
            margin-bottom: 30px;
            padding: 15px;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        .question h3 {
            color: #2c3e50;
            margin-top: 0;
        }
        .options {
            margin: 15px 0;
        }
        .option {
            margin: 10px 0;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .option:hover {
            background-color: #f0f0f0;
        }
        .selected {
            background-color: #e6f7ff;
            border-color: #1890ff;
        }
        .correct-answer {
            margin-top: 15px;
            padding: 12px;
            background-color: #f6ffed;
            border: 1px solid #52c41a;
            border-radius: 6px;
            display: none;
        }
        .answer-text {
            font-weight: bold;
            color: #52c41a;
        }
        button {
            padding: 12px 20px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #40a9ff;
        }
        button:disabled {
            background-color: #d9d9d9;
            cursor: not-allowed;
        }
        .qr-container {
            text-align: center;
            margin: 30px 0;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
        }
        #qrcode {
            display: inline-block;
            margin: 15px auto;
            padding: 10px;
            background-color: white;
            border-radius: 8px;
        }
    </style>
    <!-- 引入QRCode.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>无废城市知识问答</h1>
        
        <div class="question" id="q1">
            <h3>1. 什么是"无废城市"？</h3>
            <div class="options">
                <div class="option" onclick="selectOption(this, 'A', 1)">A. 以创新、协调、绿色、开放、共享的新发展理念为引领，通过推动形成绿色发展方式和生活方式</div>
                <div class="option" onclick="selectOption(this, 'B', 1)">B. 持续推进固体废物源头减量和资源化利用最大限度减少填埋量，将固体废物环境影响降至最低的城市发展模式</div>
                <div class="option" onclick="selectOption(this, 'C', 1)">C. 是一种先进的城市管理理念</div>
                <div class="option" onclick="selectOption(this, 'D', 1)">D. 以上皆是</div>
            </div>
            <div class="correct-answer" id="answer1">
                <strong>正确答案：<span class="answer-text">D. 以上皆是</span></strong>
            </div>
            <button id="submit1" onclick="submitAnswer(1, 'D')" disabled>提交答案</button>
        </div>

        <div class="question" id="q2">
            <h3>2. "无废城市"中的"废"指的是什么?</h3>
            <div class="options">
                <div class="option" onclick="selectOption(this, 'A', 2)">A. 固体废物</div>
                <div class="option" onclick="selectOption(this, 'B', 2)">B. 废水</div>
                <div class="option" onclick="selectOption(this, 'C', 2)">C. 废气</div>
            </div>
            <div class="correct-answer" id="answer2">
                <strong>正确答案：<span class="answer-text">A. 固体废物</span></strong>
            </div>
            <button id="submit2" onclick="submitAnswer(2, 'A')" disabled>提交答案</button>
        </div>

        <div class="question" id="q3">
            <h3>3. 固体废物的"三化"指的是什么？</h3>
            <div class="options">
                <div class="option" onclick="selectOption(this, 'A', 3)">A. 减量化、资源化、无害化</div>
                <div class="option" onclick="selectOption(this, 'B', 3)">B. 减量化、分类化、循环化</div>
                <div class="option" onclick="selectOption(this, 'C', 3)">C. 分类化、低碳化、循环化</div>
            </div>
            <div class="correct-answer" id="answer3">
                <strong>正确答案：<span class="answer-text">A. 减量化、资源化、无害化</span></strong>
            </div>
            <button id="submit3" onclick="submitAnswer(3, 'A')" disabled>提交答案</button>
        </div>

        <div class="qr-container">
            <h3>扫描二维码分享本测试</h3>
            <div id="qrcode"></div>
            <p>使用手机扫描上方二维码参与答题</p>
        </div>
    </div>

    <script>
        // 生成当前页面的二维码
        function generateQRCode() {
            const currentUrl = window.location.href;
            QRCode.toCanvas(document.getElementById('qrcode'), currentUrl, {
                width: 180,
                margin: 1,
                color: {
                    dark: '#2c3e50',
                    light: '#ffffff'
                }
            }, function(error) {
                if (error) console.error(error);
            });
        }
        
        // 选择选项
        function selectOption(element, answer, questionNum) {
            // 清除同问题的其他选项选中状态
            const options = element.parentElement.children;
            for (let i = 0; i < options.length; i++) {
                options[i].classList.remove('selected');
            }
            
            // 设置当前选中选项
            element.classList.add('selected');
            
            // 启用提交按钮
            document.getElementById('submit' + questionNum).disabled = false;
        }
        
        // 提交答案
        function submitAnswer(questionNum, correctAnswer) {
            // 显示正确答案
            document.getElementById('answer' + questionNum).style.display = 'block';
            
            // 禁用提交按钮
            document.getElementById('submit' + questionNum).disabled = true;
        }
        
        // 页面加载完成后生成二维码
        window.onload = function() {
            generateQRCode();
        };
    </script>
</body>
</html>